<template>
	<!-- 详情 -->
	<view class="container">
		<!-- 导航 -->
		<navItem class="navitem" :navIndex="navIndex" @changeItem="changeItem" ref="childRef" />
		<!-- 轮播图 -->
		<swiper v-if="mData.multCarousel&&JSON.parse(mData.multCarousel)" class="swiper" circular autoplay :indicator-dots="true" indicator-color="rgba(255, 255, 255, 0.58)" indicator-active-color="#fff">
			<swiper-item v-for="(item,index) in JSON.parse(mData.multCarousel)" :key="item.uid">
				<image :src="item.url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!--  -->
		<view class="content">
			<!-- 信息 -->
			<view class="info">
				<view class="price">
					<view class="price-num">特价：￥<text>{{mData.baseSpecialPriceCost||''}}</text>/㎡</view>
					<view class="tag" v-if="mData.baseType=='Sell'">出售</view>
					<view class="tag" v-if="mData.baseType=='Let'">租赁</view>
				</view>
				<view class="title">{{mData.baseTitle||''}}</view>
				<view class="tags" v-if="mData.multTags&&JSON.parse(mData.multTags).length">
					<view v-for="(item,index) in JSON.parse(mData.multTags)" :key="item">{{item}}</view>
				</view>
				<view class="discount">
					<view class="price-num">均价：￥<text>{{mData.baseAvgPriceCost}}</text>/㎡</view>
					<view class="date" v-if="mData.baseDate">发布时间：{{(mData.baseDate+'').slice(0,4)}}年{{(mData.baseDate+'').slice(4,6)}}月{{(mData.baseDate+'').slice(6,8)}}日</view>
				</view>
				<view class="btns">
					<view class="white" @click="go720">720°全景VR</view>
					<view class="white" @click="showPhone">线上带看</view>
					<view class="red" @click="showPhone">电话咨询</view>
				</view>
				<view class="code">
					<view class="img">
						<image :src="mData.serviceQrcode" mode="aspectFill"></image>
					</view>
					<view>客服二维码</view>
				</view>
			</view>
			<!-- 项目简介 -->
			<view class="item-info" v-if="mData.introSynopsis">
				<view class="title">
					<image src="../../../static/images/details/xiangmujianjie.png" mode=""></image>
					<view>项目简介</view>
				</view>
				<view class="text">{{mData.introSynopsis||''}}</view>
			</view>
			
			<!-- 项目基本信息 -->
			<view class="item-info">
				<view class="title">
					<image src="../../../static/images/details/jibenxinxi.png" mode=""></image>
					<view>项目基本信息</view>
				</view>
				<view class="baseinfo">
					<view v-if="mData.baseInvestor">
						<image src="../../../static/images/details/baseinfo-1.png" mode=""></image>
						<view>产业投资商：{{mData.baseInvestor}}</view>
					</view>
					<view v-if="mData.baseProductType">
						<image src="../../../static/images/details/baseinfo-2.png" mode=""></image>
						<view>产品类型：{{mData.baseProductType}}</view>
					</view>
					<view v-if="mData.basePropertyRight">
						<image src="../../../static/images/details/baseinfo-3.png" mode=""></image>
						<view>产权：{{mData.basePropertyRight}}</view>
					</view>
					<view v-if="mData.baseFloor">
						<image src="../../../static/images/details/baseinfo-4.png" mode=""></image>
						<view>楼层：{{mData.baseFloor}}层</view>
					</view>
					<view v-if="mData.lbsAddress">
						<image src="../../../static/images/details/baseinfo-5.png" mode=""></image>
						<view>项目地址：{{mData.lbsAddress}}</view>
					</view>
					<view v-if="mData.baseOccupySpaceTotal">
						<image src="../../../static/images/details/baseinfo-6.png" mode=""></image>
						<view>总占地面积：{{mData.baseOccupySpaceTotal}}m²</view>
					</view>
					<view v-if="mData.baseDeliveryStandard">
						<image src="../../../static/images/details/baseinfo-7.png" mode=""></image>
						<view>交付标准：{{mData.baseDeliveryStandard}}</view>
					</view>
					<view v-if="mData.baseHydropower">
						<image src="../../../static/images/details/baseinfo-8.png" mode=""></image>
						<view>水电：{{mData.baseHydropower}}</view>
					</view>
					<view v-if="mData.baseFirstFloorHeight||mData.baseOtherFloorHeight">
						<image src="../../../static/images/details/baseinfo-9.png" mode=""></image>
						<view>层高：首层{{mData.baseFirstFloorHeight}}米，二层以上{{mData.baseOtherFloorHeight}}米</view>
					</view>
					<view v-if="mData.baseFloorSpaceTotal">
						<image src="../../../static/images/details/baseinfo-10.png" mode=""></image>
						<view>总建筑面积：{{mData.baseFloorSpaceTotal}}m²</view>
					</view>
					<view v-if="mData.baseArchitectureAmount">
						<image src="../../../static/images/details/baseinfo-11.png" mode=""></image>
						<view>楼座数：{{mData.baseArchitectureAmount}}</view>
					</view>
					<view v-if="mData.baseArea">
						<image src="../../../static/images/details/baseinfo-12.png" mode=""></image>
						<view>面积：{{mData.baseArea}}m²</view>
					</view>
					<view v-if="mData.baseLoadBearing">
						<image src="../../../static/images/details/baseinfo-13.png" mode=""></image>
						<view>承重：{{mData.baseLoadBearing}}kg/m²</view>
					</view>
				</view>
			</view>
			
			<!-- 项目特色 -->
			<view class="item-info" v-if="mData.introFeature">
				<view class="title">
					<image src="../../../static/images/details/xiangmutese.png" mode=""></image>
					<view>项目特色</view>
				</view>
				<view class="text">{{mData.introFeature}}</view>
			</view>
			
			<!-- 交通区位 -->
			<view class="item-info" v-if="mData.introTraffic">
				<view class="title">
					<image src="../../../static/images/details/jiaotongquwei.png" mode=""></image>
					<view>交通区位</view>
				</view>
				<view class="text">{{mData.introTraffic}}</view>
			</view>		
										
			<!-- 基础配套 -->
			<view class="item-info" v-if="mData.introCircum">
				<view class="title">
					<image src="../../../static/images/details/jichupeitao.png" mode=""></image>
					<view>基础配套</view>
				</view>
				<view class="text">{{mData.introCircum}}</view>
			</view>		
										
			<!-- 项目实景 -->
			<view class="item-info" v-if="mData.multImages&&JSON.parse(mData.multImages)">
				<view class="title">
					<image src="../../../static/images/details/xiangmushijing.png" mode=""></image>
					<view>项目实景</view>
				</view>
				<view class="project-reality">
					<swiper class="swiper" circular :indicator-dots="false" display-multiple-items="2" :current="reality_view">
						<swiper-item v-for="(item,index) in JSON.parse(mData.multImages)" :key="item.uid">
							<image :src="item.url" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<view class="btns">
						<view class="prev" @click="realityPrev"><</view>
						<view class="next" @click="realityNext">></view>
					</view>
				</view>
			</view>		
										
			<!-- 项目户型 -->
			<view class="item-info" v-if="mData.multHouseType&&JSON.parse(mData.multHouseType)">
				<view class="title">
					<image src="../../../static/images/details/xiangmuhuxing.png" mode=""></image>
					<view>项目户型</view>
				</view>
				<scroll-view scroll-x="true" >
					<view class="types">
						<view :class="{'type-active':hose_type==index}" @click="hose_type=index" v-for="(item,index) in JSON.parse(mData.multHouseType)" :key="index">{{item.name}}</view>
					</view>
				</scroll-view>
				<view class="project-reality" v-if="JSON.parse(mData.multHouseType)[hose_type]">
					<swiper class="swiper" circular :indicator-dots="false" display-multiple-items="2" :current="reality_view">
						<swiper-item v-for="(item,index) in JSON.parse(mData.multHouseType)[hose_type].images" :key="item.uid">
							<image :src="item.url" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<view class="btns">
						<view class="prev" @click="realityPrev"><</view>
						<view class="next" @click="realityNext">></view>
					</view>
				</view>
			</view>		
										
			<!-- 周边配套 -->
			<view class="item-info">
				<view class="title">
					<image src="../../../static/images/details/zhoubiantaocan.png" mode=""></image>
					<view>周边配套</view>
				</view>
				<scroll-view scroll-x="true" >
					<view class="types">
						<view style="padding:0 30rpx" v-for="(item,index) in 10" :key="index" :class="{'type-active':complement==index}" @click="complement=index">公交 (12)</view>
					</view>
				</scroll-view>
				<map style="width: 100%; height: 448rpx;" ></map>
			</view>
			
			<!-- 项目视频 -->
			<view class="item-info" v-if="mData.multVideos&&JSON.parse(mData.multVideos)">
				<view class="title">
					<image src="../../../static/images/details/xiangmushipin.png" mode=""></image>
					<view>项目视频</view>
				</view>
				<view class="videos">
					<view class="video" v-for="(item,index) in JSON.parse(mData.multVideos)" :key="item.uid">
						<image src="../../../static/images/video-play.png" class="play" mode=""></image>
						<image class="cover" :src="item.url+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_650,m_fast'" mode="aspectFill"></image>
						<view>城阳未来产业园是新一代产业园</view>
					</view>
				</view>
			</view>	
			
			<!-- 免费声明 -->
			<view class="item-info" v-if="mData.introLiabilityExemption">
				<view class="title">
					<image src="../../../static/images/details/mianfeishengming.png" mode=""></image>
					<view>免费声明</view>
				</view>
				<view class="text">{{mData.introLiabilityExemption}}</view>
			</view>	
		</view>
	</view>
</template>

<script>
	import AMapLoader from '@amap/amap-jsapi-loader'
	window._AMapSecurityConfig = {
	  securityJsCode: 'b523a10d667d0e89e4dcef5f1e4e8a49'
	}
	export default {
		data() {
			return {
				navIndex: 0,
				reality_view:0,
				hose_type:0,
				complement:0,
				
				mData: {}
			  , houseTypeImages: []
			  , houseTypeImagesUrl: []
			  , houseType: []
			  , surround: []
			  , type: {
				Public_Transport: '公交'
				, Subway: '地铁'
				, High_Speed: '高速'
				, Peripheral_Community: '周边小区'
				, Leisure_Entertainment: '休闲娱乐'
				, Bank: '银行'
				, Logistics: '物流'
			  }
			  , markers: []
			  , marker: ''
			  , multImages: []
			  , multImagesUrl: []
			  , multImagesNum: 0
			  , showPreNext: false
			  , loading: ''
			  , websiteInfo: {}
			  , navItems: [
				{ name: '首页', selected: true, width: '29px' }
				, { name: '产业分布图', selected: false, width: '78px' }
				, { name: '厂房租售', selected: false, width: '68px' }
				, { name: '品质园区', selected: false, width: '68px' }
				, { name: '专精特新企业', selected: false, width: '98px' }
				, { name: '每日直播', selected: false, width: '68px' }
				, { name: '联系我们', selected: false, width: '68px' }
				]
			}
		},
		components: {
			navItem: () => import('./nav'),
		}
		
		  , mounted() {
		    this.getWebsiteInfo()
			uni.showLoading({
				title:'加载中'
			})
		    // this.mapInit()
		  },
		onLoad(options) {
			console.log('onLoad')
			this.id = options.id
			this.getData()
		},
		methods: {
			  changeItem(index) {
			      this.navIndex = index
			    }
			    , async getWebsiteInfo() {
				let res = await this.$req({
					url: `/website/website/information/Wechat:guan409932398/query`,
					method:'get',
					data: { page: 1, limit: 20, sortField: 'create_time' }
				})	
					
			      if (res.code == 200) {
			        res.data.forEach(item => {
			          this.websiteInfo[item.code] = item
			        })
			      }
			    }
			    , prev() {
			      if (this.multImagesNum < 0) {
			        this.multImagesNum += 1
			      }
			    }
			    , next() {
			      if (this.multImagesNum > -(this.multImages.length + this.multImagesNum)) {
			        this.multImagesNum -= 1
			      // eslint-disable-next-line no-compare-neg-zero
			      } else if (this.multImagesNum < -(this.multImages.length + this.multImagesNum) && -(this.multImages.length + this.multImagesNum) != -0) {
			        this.multImagesNum -= 1
			      }
			    }
			    , showPhone() {
			      if(!this.mData.serviceHotline){
					  uni.showToast({
						  title:'暂未设置！',
						  icon:'none'
					  })
					  return
				  }
				  uni.makePhoneCall({
					  phoneNumber:this.mData.serviceHotline
				  })
			    }
			    , go720() {
			      if (!this.mData.multVrUrl) {
					uni.showToast({
						title:'没有配置VR地址',
						icon:'none'
					})
			        return
			      }
			      window.open(this.mData.multVrUrl)
			    }
			    , goSurround(index) {
			      this.map.remove(this.markers)
			      this.markers = []
			      console.log('this.surround[index]', this.surround[index])
			
			      var icon = new this.$AMap.Icon({
			        size: new this.$AMap.Size(24, 32)
			        , image: 'https://oss.port56.net.cn/Wechat:guan409932398/20230110/1673312538346.png'
			        , imageSize: new this.$AMap.Size(24, 32)
			      })
			
			
			      this.surround[index].children.forEach(elment => {
			        this.marker = new this.$AMap.Marker({
			          position: [elment.lon, elment.lat]
			          , icon: icon
			          , offset: new this.$AMap.Pixel(0, -80)
			        })
			        this.marker.setLabel({
			          offset: new this.$AMap.Pixel(0, -30)
			          , content: "<div class='info'>" + elment.title + '</div>' // 设置文本标注内容
			          , direction: 'center' // 设置文本标注方位
			        })
			        this.markers.push(this.marker)
			      })
			      this.map.add(this.markers)
			    }
			    , async getData() {
			      // const res = await this.$api.parkDetail(this.id)
				  let res = await this.$req({
				  	url: `/palm_peninsula/park/${this.id}`,
				  	method: 'get',
				  })
			      uni.hideLoading()
			      if (res.code == 200) {
			        if (res.data.multHouseType) {
			          const aa = JSON.parse(res.data.multHouseType)
			          if (res.data.multImages) {
			            this.multImages = JSON.parse(res.data.multImages)
			            this.multImages.forEach(item => {
			              this.multImagesUrl.push(item.url)
			            })
			            if (this.multImages.length * 307 > (document.body.clientWidth * 0.26)) {
			              this.showPreNext = true
			            }
			          }
			
			          this.houseTypeImages = aa[0].images
			          this.houseTypeImages.forEach(item => {
			            this.houseTypeImagesUrl.push(item.url)
			          })
			          aa[0].selected = true
			          this.houseType = aa
			        }
			        // this.map.setCenter([res.data.lbsLon, res.data.lbsLat])
			        this.mData = res.data
			        // this.getSurround()
			        // this.$refs.wrap.scrollTo(0, 0)
			        window.scrollTo(0, 0)
			      }
			    }
			    , async getSurround() {
			      const res = await this.$api.queryAllByParkId(this.id)
			      if (res.code == 200) {
			        const aa = []
			        res.data.forEach(item => {
			          let has = false
			          for (let i = 0; i < aa.length; i++) {
			            if (aa[i].type == item.type) {
			              has = true
			              aa[i].children.push(item)
			              break
			            }
			          }
			          if (!has) {
			            aa.push({ type: item.type, children: [item] })
			          }
			        })
			
			        this.surround = aa
			      }
			      //   this.goSurround(0)
			      this.$forceUpdate()
			    }
			
			
			    , changeHousType(index) {
			      for (let i = 0; i < this.houseType.length; i++) {
			        if (index == i) {
			          this.houseType[i].selected = true
			          this.houseTypeImages = this.houseType[i].images
			          this.houseTypeImagesUrl = []
			          this.houseTypeImages.forEach(item => {
			            this.houseTypeImagesUrl.push(item.url)
			          })
			        } else {
			          this.houseType[i].selected = false
			        }
			      }
			    },
			
			realityPrev(){
				if(this.reality_view>0){
					this.reality_view--
				}else{
					this.reality_view = 2
				}
			},
			realityNext(){
				if(this.reality_view<2){
					this.reality_view++
				}else{
					this.reality_view = 0
				}
			},
			changeItem(index, url) {
				this.detailId = ''
				this.detailId = ''
				if (index == 4) {
					// this.zhuanjingUrl = url
					window.open(this.zhuanjingUrl, '_blank')
				} else {
					if (url && index == 1) {
						if (url.substr(0, 4) != 'http') {
							this.searchName = url
						}
					}
			
					this.navIndex = index
					// this.$refs.childRef.changeIndex(index)
					this.$forceUpdate()
				
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	padding: 96rpx 0;
	background: #fff;
	min-height: 100vh;
	// 导航
	.navitem{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 9;
	}
	// 轮播图
	>swiper{
		width: 100vw;
		height: 100vw;
		image{
			width: 100%;
			height: 100%;
		}
	}

	.content{
		padding: 48rpx 24rpx;
		// 信息
		.info{
			.price{
				color: #D33330;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 42rpx;
				.price-num{
					display: flex;
					align-items: baseline;
					font-size: 36rpx;
					text{
						margin: 0 4rpx;
						font-family: DINCondensed-Bold, DINCondensed;
						font-weight: bold;
						font-size: 72rpx;
					}
				}
				.tag{
					width: 112rpx;
					height: 56rpx;
					background: rgba(211,51,48,0.2);
					border-radius: 4rpx;
					line-height: 56rpx;
					text-align: center;
				}
			}
			.title{
				font-size: 56rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #000000;
				line-height: 56rpx;
				margin-bottom: 32rpx;
			}
			.tags{
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 16rpx;
				view{
					min-width: 152rpx;
					padding:0 20rpx;
					height: 52rpx;
					background: rgba(0,78,150,0.1);
					border-radius: 4rpx;
					line-height: 52rpx;
					text-align: center;
					margin: 0 20rpx 20rpx 0;
					color: #004E96;
				}
			}
			.discount{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				.price-num{
					display: flex;
					align-items: baseline;
					text{
						margin: 0 4rpx;
						font-family: DINCondensed-Bold, DINCondensed;
						font-weight: bold;
						font-size: 48rpx;
					}
				}
				.date{
					color: #666666;
				}
			}
			.btns{
				display: flex;
				margin:48rpx 0 96rpx;
				view{
					text-align: center;
					height: 80rpx;
					background: #FFFFFF;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					margin-right: 24rpx;
					padding: 0 32rpx;
				}
				
				.white{
					color: #004E96;
					border: 2rpx solid #004E96;
				}
				.red{
					color: #fff;
					background: #D33330;
					margin-right: 0;
				}
			}
			.code{
				display: flex;
				flex-direction: column;
				align-items: center;
				.img{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 400rpx;
					height: 400rpx;
					background: #FFFFFF;
					box-shadow: 0px 0px 36rpx 0px rgba(12,12,12,0.08);
					margin-bottom: 24rpx;
					image{
						width: 360rpx;
						height: 360rpx;
					}
				}
				view{
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
		.item-info{
			margin-top: 96rpx;
			.title{
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 48rpx;
				margin-bottom: 40rpx;
				image{
					width: 64rpx;
					height: 64rpx;
					margin-right: 16rpx;
				}
			}
			.text{
				color: #666666;
				font-size: 32rpx;
				line-height: 56rpx;
			}
		}
		// 基本信息
		.baseinfo{
			>view{
				display: flex;
				color: #333333;
				font-size: 32rpx;
				margin-top: 48rpx;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 24rpx;
					flex-shrink: 0;
				}
				view{
					flex-shrink: 0;
				}
			}
		}
		// 项目实景
		.project-reality{
			>swiper{
				width: 100%;
				height: 328rpx;
				image{
					width: 328rpx;
					height: 328rpx;
				}
			}
			scroll-view{
				width: 100%;
				.scroll-content{
					display: flex;
					image{
						width: 328rpx;
						height: 328rpx;
						margin-right: 16rpx;
						flex-shrink: 0;
					}
				}
			}
			.btns{
				display: flex;
				margin-top: 72rpx;
				view{
					width: 72rpx;
					height: 72rpx;
					border-radius: 4rpx;
					text-align: center;
					line-height: 72rpx;
					font-size: 38rpx;
				}
				.prev{
					margin-right: 24rpx;
					color: #fff;
					background: #004E96;
				}
				.next{
					color: #004E96;
					border:2rpx solid #004E96;
					line-height: 68rpx;
				}
			}
		}
		.types{
			display: flex;
			margin-bottom: 48rpx;
			view{
				flex-shrink: 0;
				padding: 0 44rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 4rpx;
				border: 2rpx solid #E3E2E2;
				line-height: 68rpx;
				text-align: center;
				color: #333333;
				font-size: 28rpx;
				margin-right: 24rpx;
			}
			.type-active{
				border: 2rpx solid #004E96;
				color: #004E96;
			}
		}
		// 项目视频
		.videos{
			.video{
				position: relative;
				width: 100%;
				height: 800rpx;
				margin-top: 32rpx;
				.cover{
					width: 100%;
					height: 100%;
					position: relative;
					z-index: 1;
				}
				view{
					font-size: 36rpx;
					color: #fff;
					padding: 0 40rpx;
					left: 0;
					width: 100%;
					bottom: 48rpx;
					position: absolute;
					z-index: 2;
				}
				.play{
					width: 96rpx;
					height: 96rpx;
					top: 40rpx;
					left: 40rpx;
					position: absolute;
					z-index: 2;
				}
			}
		}
	}
}
</style>
